<template>
  <div class="userInfo">
    <div class="title">
      <span @click="()=>router.push({path:'/newsfeed'})" class="iconfont icon-fanhuijiantou"></span>
      <i>好友动态</i>
      <span class="iconfont icon-zengjia"></span>
    </div>
    <div class="profile">
      <img src="../../public/img/Leonardo.jpg" alt="">
    </div>
    <div class="visitor">
      <div class="hh">
        <span class="iconfont icon-wangjimima-copy ico">
        </span>
      </div>
      <div class="msg">
        <span>今日访客: 0</span><br>
        <span>访客总量: 1666</span>
      </div>
    </div>
  </div>

  <div class="nav">
    <ul>
      <li>
        <span class="iconfont icon-tupian"></span>
        <i>相册</i>
      </li>
      <li>
        <span @click="()=>router.push({path:'/publish'})" class="iconfont icon-xiaoxi2"></span>
        <i>说说</i>
      </li>
      <li>
        <span class="iconfont icon-pifugexinghuazhuti-xianxing"></span>
        <i>个性化</i>
     </li>
      <li>
        <span class="iconfont icon-xiaoyouxi"></span>
        <i>小游戏</i>
      </li>
      <li>
        <span class="iconfont icon-shipin"></span>
        <i>小视频</i>
      </li>
    </ul>
  </div>

  <div class="hhh">
    <TalkList/>
  </div>
  

  
</template>

<script setup>
  import { useRouter } from 'vue-router';
  import TalkList from '../components/TalkList.vue'

  const router = useRouter()


</script>

<style scoped>
.hhh {
  width: 100%;
  height:10px;
}
.userInfo {
  position: relative;
  width: 375px;
  height: 175px;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F08%2F20200508004031_jyszn.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654486281&t=415d4b2a20b8aac1bce100d7b5ffe7af');
  background-size: cover;
  overflow: hidden;
}

.userInfo .title {
  display: flex;
  justify-content: space-between;
  margin: 10px 10px 0 10px;
}

.userInfo .title span {
  font-size: 25px;
  color: aliceblue;
}

.userInfo .title i {
  font-size: 15px;
  font-weight: 600;
  color: aliceblue;
}

.userInfo .profile {
  position: absolute;
  left: 20px;
  top: 100px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.userInfo .profile img {
  width: 100%;
  height: 100%;
}

.userInfo .visitor {
  position: absolute;
  right: 10px;
  top: 110px;
  display: flex;
  justify-content: space-between;
  width: 120px;
  height: 40px;
}

.userInfo .visitor .hh {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: aliceblue;
}

.userInfo .visitor .hh .ico {
  font-size: 28px;
  line-height: 30px;
  text-align: center;
}

.userInfo .visitor .msg {
  font-size: 11px;
  color: aliceblue;
}

.nav {
  border-bottom: 6px solid rgb(236, 239, 239);
}

.nav ul {
  display: flex;
  justify-content: space-between;
  margin: 10px 20px;
}

.nav ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav ul li span {
  
  font-size: 24px;
}


</style>